<template>
    <div class="dashboard-container">
      <!-- 顶部数据卡片 -->
      <el-row :gutter="20" class="data-cards">
        <el-col :span="6" v-for="card in dataCards" :key="card.title">
          <el-card shadow="hover">
            <div class="data-card">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
              <div class="card-compare">
                较昨日
                <span :class="card.trend >= 0 ? 'up' : 'down'">
                  {{ Math.abs(card.trend) }}%
                  <el-icon><CaretTop v-if="card.trend >= 0" /><CaretBottom v-else /></el-icon>
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 中部图表区域 -->
      <el-row :gutter="20" class="charts-area">
        <!-- 左侧：抓取任务统计 -->
        <el-col :span="12">
          <el-card title="数据抓取概况">
            <template #header>
              <div class="card-header">
                <span>数据抓取概况</span>
                <el-radio-group v-model="crawlTimeRange" size="small">
                  <el-radio-button label="today">今日</el-radio-button>
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <!-- 这里放抓取数据统计图表 -->
            <div class="chart-container" ref="crawlChart"></div>
          </el-card>
        </el-col>
  
        <!-- 右侧：内容发布统计 -->
        <el-col :span="12">
          <el-card title="内容发布概况">
            <template #header>
              <div class="card-header">
                <span>内容发布概况</span>
                <el-radio-group v-model="publishTimeRange" size="small">
                  <el-radio-button label="today">今日</el-radio-button>
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <!-- 这里放发布数据统计图表 -->
            <div class="chart-container" ref="publishChart"></div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 底部列表区域 -->
      <el-row :gutter="20" class="list-area">
        <!-- 左侧：待处理任务 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>待处理任务</span>
                <el-button text>查看全部</el-button>
              </div>
            </template>
            <el-table :data="pendingTasks" style="width: 100%">
              <el-table-column label="任务类型" prop="type" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.type === 'crawl' ? 'primary' : 'success'">
                    {{ scope.row.type === 'crawl' ? '抓取' : '发布' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="任务内容" prop="content" />
              <el-table-column label="计划执行时间" prop="planTime" width="160" />
              <el-table-column label="状态" prop="status" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
  
        <!-- 右侧：系统状态 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>系统状态</span>
                <el-button text>详细信息</el-button>
              </div>
            </template>
            <div class="system-status">
              <div v-for="item in systemStatus" :key="item.name" class="status-item">
                <div class="status-name">{{ item.name }}</div>
                <el-progress 
                  :percentage="item.value" 
                  :status="item.value > 80 ? 'exception' : 'normal'"
                />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 告警信息悬浮窗 -->
      <el-card class="alert-card" v-if="alerts.length">
        <template #header>
          <div class="card-header">
            <span>系统告警</span>
            <el-button text @click="clearAlerts">清除</el-button>
          </div>
        </template>
        <div v-for="alert in alerts" :key="alert.id" class="alert-item">
          <el-alert
            :title="alert.title"
            :type="alert.type"
            :description="alert.description"
            show-icon
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
  // 假设使用 ECharts
  import * as echarts from 'echarts'

  // 顶部数据卡片 -
  const dataCards = ref([
    { title: '今日抓取数据量', value: '12,456', trend: 5.2 },
    { title: '待发布内容', value: '32', trend: -2.1 },
    { title: '活跃账号数', value: '186', trend: 0.5 },
    { title: '系统健康度', value: '98%', trend: 0 },
    { title: '总抓取量', value: '258,741', trend: 12.3 },
    { title: '成功发布率', value: '96.7%', trend: -1.2 },
    { title: '平均响应时间', value: '1.2s', trend: -0.3 },
    { title: '异常任务数', value: '7', trend: 4.5 }
  ])

  // 时间范围选择
  const crawlTimeRange = ref('today')
  const publishTimeRange = ref('today')

  // 待处理任务 - 添加更多假数据
  const pendingTasks = ref([
    { type: 'crawl', content: '抖音达人数据抓取', planTime: '2024-03-20 15:00', status: '待执行' },
    { type: 'crawl', content: '快手热门视频爬取', planTime: '2024-03-20 16:30', status: '待执行' },
    { type: 'publish', content: '小红书内容发布', planTime: '2024-03-20 17:00', status: '待执行' },
    { type: 'publish', content: '抖音视频发布', planTime: '2024-03-20 19:30', status: '执行中' },
    { type: 'crawl', content: '微博热点话题抓取', planTime: '2024-03-20 20:00', status: '异常' },
    { type: 'publish', content: '快手内容发布', planTime: '2024-03-21 09:00', status: '待执行' },
   
  ])

  // 系统状态 - 添加更多假数据
  const systemStatus = ref([
    { name: 'CPU使用率', value: 45 },
    { name: '内存使用率', value: 62 },
    { name: '存储空间', value: 78 },
    { name: '带宽使用率', value: 35 },
    { name: '爬虫任务数', value: 68 },
    { name: '发布任务数', value: 24 },
    { name: '活跃线程数', value: 16 },
    { name: '平均负载', value: 3.2 }
  ])

  // 告警信息 - 添加更多假数据
  const alerts = ref([
    { id: 1, type: 'warning', title: '账号异常提醒', description: '3个抖音账号登录状态异常，请及时处理' },
    { id: 2, type: 'danger', title: '爬虫任务失败', description: '微博热点话题抓取任务连续失败3次' },
    { id: 3, type: 'info', title: '系统更新提醒', description: '系统将在今晚23:00进行维护更新' },
    { id: 4, type: 'warning', title: '磁盘空间不足', description: '剩余存储空间不足20%，请及时清理' }
  ])

  // 状态标签类型
  const getStatusType = (status) => {
    const types = {
      '待执行': 'info',
      '执行中': 'primary',
      '已完成': 'success',
      '异常': 'danger'
    }
    return types[status] || 'info'
  }

  const clearAlerts = () => {
    alerts.value = []
  }

  // 图表实例引用
  const crawlChart = ref(null)
  const publishChart = ref(null)

  // 抓取数据图表配置
  const getCrawlOption = (timeRange) => {
    // 根据不同时间范围返回不同的数据
    let xAxisData, seriesData

    switch(timeRange) {
      case 'today':
        xAxisData = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        seriesData = [
          { name: '抖音', type: 'line', data: [320, 132, 201, 334, 390, 330, 220, 280] },
          { name: '快手', type: 'line', data: [220, 182, 191, 234, 290, 230, 120, 180] },
          { name: '小红书', type: 'line', data: [150, 132, 101, 134, 190, 130, 120, 90] }
        ]
        break
      case 'week':
        xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        seriesData = [
          { name: '抖音', type: 'line', data: [1200, 1320, 1010, 1340, 900, 1300, 1200] },
          { name: '快手', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320] },
          { name: '小红书', type: 'line', data: [320, 432, 401, 434, 590, 530, 420] }
        ]
        break
      case 'month':
        xAxisData = ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
        seriesData = [
          { name: '抖音', type: 'line', data: [5200, 5320, 4010, 4340, 5900, 5300, 4200] },
          { name: '快手', type: 'line', data: [3200, 3320, 3010, 3340, 2900, 3300, 3200] },
          { name: '小红书', type: 'line', data: [1200, 1320, 1010, 1340, 900, 1300, 1200] }
        ]
        break
    }

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['抖音', '快手', '小红书'],
        textStyle: {
          color: '#e6f1ff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.5)'
          }
        },
        axisLabel: {
          color: '#ccd6f6'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.5)'
          }
        },
        axisLabel: {
          color: '#ccd6f6'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.1)'
          }
        }
      },
      series: seriesData.map(item => ({
        ...item,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(100,255,218,0.5)',
          shadowBlur: 10
        },
        itemStyle: {
          color: item.name === '抖音' ? '#64ffda' : item.name === '快手' ? '#9d4edd' : '#f72585',
          borderWidth: 2,
          borderColor: '#fff'
        },
        symbolSize: 8
      }))
    }
  }

  // 发布数据图表配置
  const getPublishOption = (timeRange) => {
    // 根据不同时间范围返回不同的数据
    let xAxisData, seriesData

    switch(timeRange) {
      case 'today':
        xAxisData = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        seriesData = [
          { name: '成功发布', type: 'bar', stack: 'total', data: [120, 82, 91, 134, 190, 130, 120, 80] },
          { name: '发布失败', type: 'bar', stack: 'total', data: [20, 12, 11, 34, 20, 30, 20, 10] }
        ]
        break
      case 'week':
        xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        seriesData = [
          { name: '成功发布', type: 'bar', stack: 'total', data: [420, 382, 491, 434, 590, 430, 320] },
          { name: '发布失败', type: 'bar', stack: 'total', data: [80, 52, 61, 44, 70, 60, 50] }
        ]
        break
      case 'month':
        xAxisData = ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
        seriesData = [
          { name: '成功发布', type: 'bar', stack: 'total', data: [1200, 1382, 1491, 1434, 1590, 1430, 1320] },
          { name: '发布失败', type: 'bar', stack: 'total', data: [280, 252, 261, 244, 270, 260, 250] }
        ]
        break
    }

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['成功发布', '发布失败'],
        textStyle: {
          color: '#e6f1ff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.5)'
          }
        },
        axisLabel: {
          color: '#ccd6f6'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.5)'
          }
        },
        axisLabel: {
          color: '#ccd6f6'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(100,255,218,0.1)'
          }
        }
      },
      series: seriesData.map(item => ({
        ...item,
        itemStyle: {
          color: item.name === '成功发布' ? '#48bb78' : '#ed64a6'
        }
      }))
    }
  }

  // 图表初始化 - 添加丰富的图表数据和交互
  onMounted(() => {
    // 初始化抓取数据图表
    crawlChart.value = echarts.init(document.querySelector('.chart-container'))
    crawlChart.value.setOption(getCrawlOption(crawlTimeRange.value))

    // 初始化发布数据图表
    publishChart.value = echarts.init(document.querySelectorAll('.chart-container')[1])
    publishChart.value.setOption(getPublishOption(publishTimeRange.value))

    // 窗口大小改变时，重置图表大小
    window.addEventListener('resize', () => {
      crawlChart.value.resize()
      publishChart.value.resize()
    })
  })

  // 监听时间范围变化，更新图表数据
  watch(crawlTimeRange, (newValue) => {
    if (crawlChart.value) {
      crawlChart.value.setOption(getCrawlOption(newValue))
    }
  })

  watch(publishTimeRange, (newValue) => {
    if (publishChart.value) {
      publishChart.value.setOption(getPublishOption(newValue))
    }
  })
  </script>
  
<style lang="scss" scoped>
.dashboard-container {
   margin-right:50px;
  padding: 20px;
  min-height: 100vh;
  background: 
    linear-gradient(45deg, #000b1a 0%, #0a192f 30%, #1b0f2e 60%, #2c0b30 100%),
    repeating-linear-gradient(90deg, 
      transparent 0%, 
      rgba(64,255,218,0.1) 20%, 
      transparent 40%,
      rgba(247,37,133,0.1) 60%,
      transparent 80%
    ),
    url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence baseFrequency="0.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
  color: #e6f1ff;
  position: relative;
  overflow-x: hidden;
  z-index: 0;

  // 核心科技变量
  --neon-blue: #64ffda;
  --neon-purple: #9d4edd;
  --neon-pink: #f72585;
  --glow-blue: 0 0 15px #64ffda, 0 0 30px #64ffda, 0 0 50px rgba(100,255,218,0.8);
  --glow-purple: 0 0 10px #9d4edd, 0 0 20px #9d4edd, 0 0 30px rgba(157,78,221,0.6);
  --grid-bg: linear-gradient(rgba(100,255,218,0.1) 1px, transparent 1px),
             linear-gradient(90deg, rgba(100,255,218,0.1) 1px, transparent 1px);
  --tech-font: 'Orbitron', 'Rajdhani', 'Consolas', monospace;

  // 网格背景
  &:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grid-bg);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
  }

  // 粒子效果
  &:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle, rgba(100,255,218,0.1) 1px, transparent 1px),
      radial-gradient(circle, rgba(157,78,221,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    pointer-events: none;
    z-index: -1;
    animation: float 30s linear infinite;
  }

  .data-cards {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;

    .el-card {
      border: 2px dashed #64ffda;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(100,255,218,0.03) 0%, rgba(157,78,221,0.02) 100%);
      backdrop-filter: blur(15px);
      box-shadow: inset 0 0 30px rgba(255,255,255,0.05), 0 0 80px rgba(100,255,218,0.2);
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: glitch 15s infinite;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        background: linear-gradient(45deg, #64ffda, #9d4edd, #f72585);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0.5;
        z-index: -1;
        animation: border-flow 6s linear infinite;
      }

      &:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: inset 0 0 40px rgba(255,255,255,0.1), 0 0 100px rgba(100,255,218,0.3);
        animation: glitch 5s infinite;
      }
    }

    .data-card {
      padding: 20px;
      font-family: var(--tech-font);

      .card-title {
        color: #8892b0;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
        text-shadow: 0 0 5px rgba(255,255,255,0.1);
      }

      .card-value {
        font-size: 32px;
        font-weight: bold;
        margin: 10px 0;
        color: #e6f1ff;
        text-shadow: 0 0 10px rgba(255,255,255,0.1), 0 0 20px var(--neon-blue);
        position: relative;

        &:after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 40%;
          height: 2px;
          background: linear-gradient(90deg, var(--neon-blue), transparent);
        }
      }

      .card-compare {
        font-size: 14px;
        color: #8892b0;
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 8px;

        .up { 
          color: #48bb78;
          text-shadow: 0 0 5px rgba(72,187,120,0.5);
        }
        .down { 
          color: #ed64a6;
          text-shadow: 0 0 5px rgba(237,100,166,0.5);
        }
      }
    }
  }

  .charts-area {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;

    .el-card {
      border: 2px dashed #64ffda;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(10,25,47,0.8) 0%, rgba(10,35,68,0.8) 100%);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 50px rgba(100,255,218,0.15), inset 0 0 20px rgba(100,255,218,0.05);
      overflow: hidden;

      .el-card__header {
        background-color: rgba(10,25,47,0.5);
        border-bottom: 1px solid rgba(100,255,218,0.2);
        padding: 15px 20px;
      }

      .el-card__body {
        padding: 20px;
      }
    }

    .chart-container {
      height: 300px;
      position: relative;
      z-index: 1;
      border: 1px solid rgba(100,255,218,0.2);
      border-radius: 8px;
      background: rgba(10,25,47,0.3);
      overflow: hidden;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--grid-bg);
        background-size: 30px 30px;
        opacity: 0.3;
        z-index: -1;
      }
    }
  }

  .list-area {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;

    .el-card {
      border: 2px dashed #64ffda;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(10,25,47,0.8) 0%, rgba(10,35,68,0.8) 100%);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 50px rgba(100,255,218,0.15), inset 0 0 20px rgba(100,255,218,0.05);
      overflow: hidden;

      .el-card__header {
        background-color: rgba(10,25,47,0.5);
        border-bottom: 1px solid rgba(100,255,218,0.2);
        padding: 15px 20px;
      }

      .el-card__body {
        padding: 20px;
      }
    }

    .el-table {
      border: 1px solid rgba(100,255,218,0.2);
      background: rgba(10,25,47,0.4);

      .el-table__header-wrapper th {
        background: linear-gradient(90deg, rgba(10,25,47,0.8), rgba(10,25,47,0.5));
        color: var(--neon-blue);
        border-bottom: 1px solid rgba(100,255,218,0.5);
        text-shadow: var(--glow-blue);
      }

      .el-table__body-wrapper td {
        border-bottom: 1px dashed rgba(100,255,218,0.2);
        color: #ccd6f6;

        &:hover {
          background: rgba(100,255,218,0.05);
        }
      }
    }

    .system-status {
      padding: 10px;

      .status-item {
        margin-bottom: 20px;

        .status-name {
          margin-bottom: 8px;
          color: #ccd6f6;
          font-family: var(--tech-font);
          display: flex;
          justify-content: space-between;
        }
      }

      .el-progress {
        background-color: rgba(10,25,47,0.5);
        border: 1px solid rgba(100,255,218,0.3);
        height: 8px;

        .el-progress__bar {
          background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
          height: 8px;
          box-shadow: var(--glow-blue);
        }

        &.is-exception {
          .el-progress__bar {
            background: linear-gradient(90deg, var(--neon-pink), #ed64a6);
            box-shadow: 0 0 10px rgba(247,37,133,0.5);
          }
        }
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--tech-font);

    span {
      color: var(--neon-blue);
      font-weight: 500;
      text-shadow: var(--glow-blue);
      font-size: 16px;
    }

    .el-button {
      color: #8892b0;
      background: transparent;
      border: none;
      padding: 5px 10px;
      transition: all 0.3s ease;

      &:hover {
        color: var(--neon-blue);
        text-shadow: var(--glow-blue);
        background: rgba(100,255,218,0.1);
      }
    }

    .el-radio-group {
      .el-radio-button {
        background: rgba(10,25,47,0.5);
        border-color: rgba(100,255,218,0.3);
        color: #8892b0;

        &:hover {
          color: var(--neon-blue);
          border-color: var(--neon-blue);
          background: rgba(10,25,47,0.7);
        }

        &.is-active {
          background: rgba(100,255,218,0.1);
          border-color: var(--neon-blue);
          color: var(--neon-blue);
          box-shadow: inset 0 0 10px rgba(100,255,218,0.2);
        }
      }
    }
  }

  .alert-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    border: 2px dashed var(--neon-pink);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(10,25,47,0.9) 0%, rgba(10,35,68,0.9) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 50px rgba(247,37,133,0.2), inset 0 0 20px rgba(247,37,133,0.1);
    z-index: 100;
    overflow: hidden;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple)) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.7;
      z-index: -1;
      animation: border-flow 6s linear infinite;
    }

    .el-card__header {
      background-color: rgba(10,25,47,0.7);
      border-bottom: 1px solid rgba(247,37,133,0.3);
      padding: 15px 20px;
    }

    .el-card__body {
      padding: 15px;
      max-height: 400px;
      overflow-y: auto;
    }

    .alert-item {
      margin-bottom: 15px;
      animation: glitch 10s infinite;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-alert {
      background: rgba(10,25,47,0.5);
      border: 1px solid rgba(247,37,133,0.3);
      color: #e6f1ff;

      .el-alert__title {
        color: var(--neon-pink);
        text-shadow: 0 0 5px rgba(247,37,133,0.5);
      }

      .el-alert__description {
        color: #ccd6f6;
      }

      .el-alert__icon {
        color: var(--neon-pink);
      }
    }
  }

  // 标签样式
  .el-tag {
    border: 1px solid transparent;
    background: rgba(100,255,218,0.1);
    color: var(--neon-blue);
    box-shadow: var(--glow-blue);

    &[type="success"] {
      background: rgba(72,187,120,0.1);
      color: #48bb78;
      box-shadow: 0 0 8px rgba(72,187,120,0.2);
    }

    &[type="info"] {
      background: rgba(145,194,255,0.1);
      color: #91c2ff;
      box-shadow: 0 0 8px rgba(145,194,255,0.2);
    }

    &[type="danger"] {
      background: rgba(237,100,166,0.1);
      color: #ed64a6;
      box-shadow: 0 0 8px rgba(237,100,166,0.2);
    }
  }

  // 自定义滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(10,25,47,0.5);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(100,255,218,0.3), rgba(157,78,221,0.3));
    border-radius: 4px;
    border: 1px solid rgba(10,25,47,0.8);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(100,255,218,0.5), rgba(157,78,221,0.5));
    box-shadow: 0 0 10px rgba(100,255,218,0.3);
  }
}

// 动画效果
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes scan {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes float {
  0% { background-position: 0 0, 25px 25px; }
  100% { background-position: 50px 50px, 75px 75px; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glitch {
  0%, 100% { transform: skew(0deg); }
  1% { transform: skew(5deg); }
  2% { transform: skew(-5deg); }
  3% { transform: skew(0deg); }
}

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>